<div class="lx-date">
    <!-- Date picker input -->
    <div class="lx-date-input" ng-click="lxDatePicker.openDatePicker()" ng-if="lxDatePicker.hasInput">
        <ng-transclude></ng-transclude>
    </div>
    
    <!-- Date picker -->
    <div class="lx-date-picker lx-date-picker--{{ lxDatePicker.color }}">
        <div ng-if="lxDatePicker.isOpen">
            <!-- Date picker: header -->
            <div class="lx-date-picker__header">
                <a class="lx-date-picker__current-year"
                   ng-class="{ 'lx-date-picker__current-year--is-active': lxDatePicker.yearSelection }"
                   ng-click="lxDatePicker.displayYearSelection()">
                    {{ lxDatePicker.moment(lxDatePicker.ngModel).format('YYYY') }}
                </a>

                <a class="lx-date-picker__current-date"
                   ng-class="{ 'lx-date-picker__current-date--is-active': !lxDatePicker.yearSelection }"
                   ng-click="lxDatePicker.hideYearSelection()">
                    {{ lxDatePicker.getDateFormatted() }}
                </a>
            </div>
            
            <!-- Date picker: content -->
            <div class="lx-date-picker__content">
                <!-- Calendar -->
                <div class="lx-date-picker__calendar" ng-if="!lxDatePicker.yearSelection">
                    <div class="lx-date-picker__nav">
                        <lx-button lx-size="l" lx-color="black" lx-type="icon" ng-click="lxDatePicker.previousMonth()">
                            <i class="mdi mdi-chevron-left"></i>
                        </lx-button>

                        <span>{{ lxDatePicker.ngModelMoment.format('MMMM YYYY') }}</span>
                        
                        <lx-button lx-size="l" lx-color="black" lx-type="icon" ng-click="lxDatePicker.nextMonth()">
                            <i class="mdi mdi-chevron-right"></i>
                        </lx-button>
                    </div>

                    <div class="lx-date-picker__days-of-week">
                        <span ng-repeat="day in lxDatePicker.daysOfWeek">{{ day }}</span>
                    </div>

                    <div class="lx-date-picker__days">
                        <span class="lx-date-picker__day lx-date-picker__day--is-empty"
                              ng-repeat="x in lxDatePicker.emptyFirstDays">&nbsp;</span>

                        <div class="lx-date-picker__day"
                             ng-class="{ 'lx-date-picker__day--is-selected': day.selected,
                                         'lx-date-picker__day--is-today': day.today && !day.selected,
                                         'lx-date-picker__day--is-disabled': day.disabled }"
                             ng-repeat="day in lxDatePicker.days">
                            <a ng-click="lxDatePicker.select(day)">{{ day ? day.format('D') : '' }}</a>
                        </div>

                        <span class="lx-date-picker__day lx-date-picker__day--is-empty"
                              ng-repeat="x in lxDatePicker.emptyLastDays">&nbsp;</span>
                    </div>
                </div>

                <!-- Year selection -->
                <div class="lx-date-picker__year-selector" ng-if="lxDatePicker.yearSelection">
                    <a class="lx-date-picker__year"
                         ng-class="{ 'lx-date-picker__year--is-active': year == lxDatePicker.moment(lxDatePicker.ngModel).format('YYYY') }"
                         ng-repeat="year in lxDatePicker.years"
                         ng-click="lxDatePicker.selectYear(year)"
                         ng-if="lxDatePicker.yearSelection">
                        {{ year }}
                    </a>
                </div>
            </div>

            <!-- Actions -->
            <div class="lx-date-picker__actions">
                <lx-button lx-color="{{ lxDatePicker.color }}" lx-type="flat" ng-click="lxDatePicker.closeDatePicker()">
                    Ok
                </lx-button>
            </div>
        </div>
    </div>
</div>